<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./Students.css" />
  </head>

  <body>
    <div class="wrap">
      <div class="title">学生系统</div>
      <div id="form">
        <p>姓名<input id="username" type="text" value="张三123" /></p>
        <p>年龄<input id="age" type="text" value="21" /></p>
        <p>
          性别
          <select id="gender">
            <option>男</option>
            <option>女</option>
            <option>你猜</option>
          </select>
        </p>
        <p>
          <input type="button" value="添加" id="addBtn" />
          <input type="button" value="排序" id="sortBtn" />
        </p>
      </div>
      <table id="table">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <script>
            let nameEle = document.querySelector("#username");
            let ageEle = document.querySelector("#age");
            let selectEle = document.querySelector("#gender");
            let addBtn = document.querySelector("#addBtn");
            var tbodyEle = document.querySelector("tbody");
            // 获取排序按钮
            var sortBtn = document.querySelector("#sortBtn");
            console.log(addBtn);
            //grt获取信息,渲染到页面
            let xhrs = new XMLHttpRequest();
            xhrs.open("get", `/studentInformation`);
            xhrs.onload = function () {
              let reslut = JSON.parse(xhrs.responseText);

              console.log(reslut);
              tbodyEle.innerHTML = "";
              reslut.forEach((item, key) => {
                tbodyEle.innerHTML += `<tr><td>${item.username}</td><td>${item.age}</td><td>${item.gender}</td><td class='del'>删除</td></tr>`;
                var delBtn = tbodyEle.querySelector(".del");
              });
            };
            xhrs.send();

            // 点击添加添加数据
            addBtn.onclick = async function () {
              let username = nameEle.value;
              let age = ageEle.value;
              let gender = selectEle.value;
              console.log(username, age, gender);
              let res = await $.ajax({
                type: "poat",

                url: "/getdata",
                data: {
                  username,
                  age,
                  gender,
                },
              });
              if (res.status == 1) {
                let { users } = await $.get("/getdata");
                renderDom(users);
              }
              (async function () {
                let { users } = await $.get("/getdata");
                renderDom(users);
              })();

              // let xhr = new XMLHttpRequest();
              // xhr.open("post", "getdata");
              // xhr.onreadystatechange = function () {
              //   if (xhr.readyState == 4) {
              //     if (xhr.status == 200) {
              //       console.log(xhr.responseText);
              //     }
              //   }
              // };

              // xhr.setRequestHeader("Content-Type", "application/json");
              // let data = JSON.stringify({
              //   username: username,
              //   age: age,
              //   gender: gender,
              // });
              // xhr.send(data);

              //重新渲染
              /* let xhrs = new XMLHttpRequest();
              xhrs.open("get", `/studentInformation`);
              xhrs.onload = function () {
                let reslut = JSON.parse(xhrs.responseText);

                console.log(reslut);
                tbodyEle.innerHTML = "";
                reslut.forEach((item, key) => {
                  tbodyEle.innerHTML += `<tr><td>${item.username}</td><td>${item.age}</td><td>${item.gender}</td><td class='del'>删除</td></tr>`;
                });
              };
              xhrs.send();
            }; */

            //点击删除
            console.log(tbodyEle);
            // let trEle = document.querySelectorAll("tr");
            // console.log(trEle);
            tbodyEle.onclick = function (e, key) {
              var target = e.target;
              console.log(target);
              /* var target1 = e.target;
              console.log(target1); */
              if (target.innerHTML === "删除") {
                let username = target.parentElement.children[0];
                let age = target.parentElement.children[1];
                let gender = target.parentElement.children[2];
                // console.log(username);
                // console.log(age);
                // console.log(gender);
                console.log(target);
                target.parentElement.remove();

                //
                let xhr = new XMLHttpRequest();
                xhr.open("post", "deldata");
                xhr.onreadystatechange = function () {
                  if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                      console.log(xhr.responseText);
                    }
                  }
                };

                xhr.setRequestHeader("Content-Type", "application/json");
                console.log(username.innerHTML);
                console.log(age.innerHTML);
                console.log(gender.innerHTML);
                let data = JSON.stringify({
                  username: username.innerHTML,
                  age: age.innerHTML,
                  gender: gender.innerHTML,
                });

                // console.log(data);
                xhr.send(data);
              }
            };

            //点击排序
            sortBtn.onclick = function () {
              //接受数据重新渲染
              let xhr = new XMLHttpRequest();
              xhr.open("get", `/studentSortdata`);
              xhr.onload = function () {
                let reslut = JSON.parse(xhr.responseText);
                console.log(reslut);
                tbodyEle.innerHTML = "";
                reslut.forEach((item, key) => {
                  // let trEle = document.createElement("tr");
                  tbodyEle.innerHTML += `<tr><td>${item.username}</td><td>${item.age}</td><td>${item.gender}</td><td class='del'>删除</td></tr>`;
                });
              };
              xhr.send();
            };

            // };
          </script>
        </tbody>
      </table>
    </div>
  </body>
</html>
